<template>
  <div class="components-container">
    <div class="filter-container">
      <el-date-picker
        v-model="tableQuery.year"
        type="year"
        size="small"
        :clearable="false"
        value-format="yyyy"
        placeholder="选择年"
        class="filter-item"
      ></el-date-picker>
      <!-- <el-select
        size="small"
        v-model="tableQuery.quarter"
        clearable
        placeholder="季度"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option value="1" label="Q1季度"></el-option>
        <el-option value="2" label="Q2季度"></el-option>
        <el-option value="3" label="Q3季度"></el-option>
        <el-option value="4" label="Q4季度"></el-option>
      </el-select> -->
      <el-select
        size="small"
        v-model="tableQuery.applySource"
        clearable
        placeholder="渠道"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in applySource"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.productName"
        clearable
        placeholder="产品"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in productName"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.userType"
        clearable
        placeholder="客群"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in userType"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-select
        size="small"
        v-model="tableQuery.strategyVersion"
        clearable
        placeholder="策略版本"
        class="filter-item"
        style="width: 200px;"
      >
        <el-option
          v-for="item in strategyVersion"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
      <el-button
        size="small"
        @click="handleFilter"
        type="primary"
        class="filter-item"
        ref="btnQuery"
        >查询</el-button
      >
      <el-button
        @click="handleReset"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >重置</el-button
      >
      <!-- <el-button
        @click="download"
        size="small"
        type="primary"
        class="filter-item"
        ref="btnRefresh"
        >下载</el-button
      > -->
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        label="产品"
        prop="product"
        align="center"
      ></el-table-column>
      <el-table-column label="一月" prop="jan" align="left"></el-table-column>
      <el-table-column label="二月" prop="feb" align="left"></el-table-column>
      <el-table-column label="三月" prop="mar" align="left"></el-table-column>
      <el-table-column label="四月" prop="apr" align="left"></el-table-column>
      <el-table-column label="五月" prop="may" align="left"></el-table-column>
      <el-table-column label="六月" prop="jun" align="left"></el-table-column>
      <el-table-column label="七月" prop="jul" align="left"></el-table-column>
      <el-table-column label="八月" prop="aug" align="left"></el-table-column>
      <el-table-column label="九月" prop="sep" align="left"></el-table-column>
      <el-table-column label="十月" prop="oct" align="left"></el-table-column>
      <el-table-column
        label="十一月"
        prop="nov"
        align="center"
      ></el-table-column>
      <el-table-column
        label="十二月"
        prop="dec"
        align="center"
      ></el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { getList } from '@/api/risksystem/riskMarket/applyAdopt.ts'
import {
  getApply,
  getProducts,
  getUserTypes,
  getStrategyVersions
} from '@/api/risksystem/riskMarket/search.ts'
const defaultQuery = {
  applySource: '',
  product: '',
  userType: '',
  strategyVersion: '',
  year: String(new Date().getFullYear()),
  quarter:
    new Date().getMonth() + 1 <= 3
      ? '1'
      : new Date().getMonth() + 1 > 3 && new Date().getMonth() + 1 <= 6
      ? '2'
      : new Date().getMonth() + 1 > 6 && new Date().getMonth() + 1 <= 9
      ? '3'
      : '4'
}
// const quarterQuery = {
//   year: String(new Date().getFullYear()),
//   quarter:
//     new Date().getMonth() + 1 <= 3
//       ? '1'
//       : new Date().getMonth() + 1 > 3 && new Date().getMonth() + 1 <= 6
//       ? '2'
//       : new Date().getMonth() + 1 > 6 && new Date().getMonth() + 1 <= 9
//       ? '3'
//       : '4'
// }
@Component({
  name: 'trustTrial',
  components: {
    //引用的组件在这里声明
  }
})
export default class extends Vue {
  private tableQuery: any = Object.assign({}, defaultQuery)
  private productName = [] //产品名
  private applySource = [] //渠道
  private userType = [] //客群
  private strategyVersion = [] // 版本

  private tableData = []

  created() {
    // 数据源加载
    this.getApplylist()
    this.getProducts()
    this.getUserTypes()
    this.getStrategyVersions()
    // 表格数据
    this.getList()
  }
  mounted() {
    // this.getApply()
  }
  // 搜索数据源获取
  private async getApplylist() {
    const res = await getApply()
    this.applySource = res.data.applySources
  }
  private async getProducts() {
    const res = await getProducts()
    this.productName = res.data.products
  }
  private async getUserTypes() {
    const res = await getUserTypes()
    this.userType = res.data.userTypes
  }
  private async getStrategyVersions() {
    const res = await getStrategyVersions()
    this.strategyVersion = res.data.strategyVersions
  }
  // 表格内容获取
  private async getList() {
    const { data } = await getList({ search: this.tableQuery })
    this.tableData = data.rows
  }
  // 查询、重置
  private handleFilter() {
    if (this.tableQuery.year === null) {
      this.$message.error('季度表年份条件必须！')
      return false
    }
    // if (this.tableQuery.quarter === '') {
    //   this.$message.error('季度表季度条件必须！')
    //   return false
    // }
    this.tableQuery.current_page = 1
    this.getList()
  }
  private handleReset() {
    this.tableQuery = Object.assign({}, defaultQuery)
  }
  private download() {
    console.log('下载')
  }
}
</script>
<style scoped>
.components-container {
  padding: 20px;
}
</style>
